<!-- 
 《音乐播放页》
 
 ***显示***
 
 ***自动***
 1.获取从上一页获取的musicID
 2.通过musicID从云端获取music信息
 4.向VueX提交请求 获取下一首歌的ID与上一首个的ID
 5.从VueX获取下一首歌的ID与上一首个的ID
 
 ***步骤***
 1.暂停、播放音频
 2.拖动音频进度
 3.上一首、下一首
 4.快进10秒、慢进10秒
 -->

<template>
	<view class="musicPlay">
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>
		<view class="mask-layer" @tap.stop="hide" v-show="maskLayer"></view>

		<!-- #ifdef MP-WEIXIN -->
		<!-- 微信小程序端 返回状态栏 -->
		<headBarWX title='播放器' :show='true'></headBarWX>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<headBarAPP title='播放器'></headBarAPP>
		<!-- #endif -->
		<view class="container">
			<view class="musicPlay-middle">
				<view class="player">
					<view class="disc">
						<image :class="{'isActive':audioStatus }" src="../../static/disc1.png"></image>
					</view>
					<view class="rack"></view>
				</view>
				<view class="name">{{musicInfo.name}}</view>
			</view>
			<view class="musicPlay-down">
				<view class="top">
					<view>
						<text class="iconfont">&#xe697;</text>
						<view>倍数</view>
					</view>
					<view>
						<text class="iconfont">&#xe85c;</text>
						<view>定时</view>
					</view>
					<view>
						<text class="iconfont">&#xe60d;</text>
						<view>下载</view>
					</view>
					<view>
						<text class="iconfont" @tap="Like()">&#xe616;</text>
						<view>喜欢</view>
					</view>
				</view>
				<view class="middle">
					<text class="iconfont icon-icon-test" @tap="rewind()"></text>
					<slider v-model="sliderValue" @change="onSliderChange" max="100">
						<view class="now-time">{{musicInfo.currentTime | formatTime}}</view>
						<view class="total-time">{{musicInfo.duration | formatTime}}</view>
					</slider>
					<text class="iconfont icon-kuaijin" @tap="fastForward()"></text>
				</view>
				<view class="down">
					<text class="iconfont" @tap="Collect">&#xe64e;</text>
					<text class="iconfont" @tap="preMusic()">
						&#xea88;
					</text>
					<text class="iconfont" @tap="exchangeAudioStatus()">
						{{audioStatus?'&#xe64b;':'&#xe620;'}}
					</text>
					<text class="iconfont" @tap="nextMusic()">
						&#xea7f;
					</text>
					<text class="iconfont">
						&#xe831;
					</text>
				</view>
			</view>
		</view>

		<view class="window-collect" v-show="show_window_collect">
			<view class="title">收藏到歌单</view>
			<view class="seg"></view>
			<scroll-view class="personal-album-list" scroll-y="true">
				<view class="item albumList" v-for="(item,index) in albumList" :key="index"
					@tap="CollectToPersonalAlbum(index)">
					<view class="cover">
						<image :src="item.coverPath"></image>
					</view>
					<view class="info">
						<view class="name">{{item.name}}</view>
						<view class="quantity">{{item.number}}首</view>
					</view>
				</view>
				<view class="blank" style="height: 140rpx;"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		DetermineWeatherToLogIn
	} from '@/utils/common.js';
	import headBarWX from '@/components/headBarWX/headBarWX.vue'
	import headBarAPP from '@/components/headBarAPP/headBarAPP.vue'
	// 导入云对象
	const Album = uniCloud.importObject('Album', {
		customUI: true // 取消自动展示的交互提示界面
	});
	const cloudMusic = uniCloud.importObject('cloudMusic', {
		customUI: true // 取消自动展示的交互提示界面
	});
	export default {
		data() {
			return {
				// 信息
				userInfo: {},
				musicInfo: {
					name: '',
					cloudPath: '',
					duration: 0,
					currentTime: 0,
				}, // 歌曲信息
				albumList: [],

				// 标识信息
				nextMusicIng: false, // 正在切换下一首歌
				sliderValue: 0, // 进度条
				audioStatus: true, // 播放器实列状态
				show_window_collect: false,
				maskLayer: false,
			}
		},
		components: {
			headBarWX,
			headBarAPP
		},
		onLoad(options) {
			let ID = options.musicID;
			const app = getApp();
			this.userInfo = app.userInfo;
			if (app.musicInfo._id == ID) {
				console.log('继续播放', ID)
			} else {
				console.log('新歌重播', ID)
				uni.$emit('initAudio', ID);
			}

			uni.$on('updateMusicInfo', (musicInfo) => {
				this.musicInfo = musicInfo;
				this.sliderValue = (musicInfo.currentTime / musicInfo.duration) * 100;
				// console.log('音乐信息：', musicInfo);
			});
		},
		onHide() {
			return 0;
		},
		onUnload() {
			uni.$off('updateMusicInfo');
			return 0;
		},
		methods: {
			/** 后退10秒
			 * 
			 */
			rewind() {
				let curretTime = parseInt(this.musicInfo.currentTime);
				let newTime = curretTime > 10 ? curretTime - 10 : 0;
				console.log(curretTime + '=>' + newTime);
				this.audioSeek(newTime);
			},
			/** 快进10秒
			 * 
			 */
			fastForward() {
				let curretTime = parseInt(this.musicInfo.currentTime);
				let newTime = curretTime < this.musicInfo.duration - 10 ? curretTime + 10 : this.musicInfo.duration;
				console.log(curretTime + '=>' + newTime);
				this.audioSeek(newTime);
			},
			/** 播放实例状态切换
			 * 
			 */
			exchangeAudioStatus() {
				if (this.audioStatus) {
					uni.$emit('pauseBgm');
					this.audioStatus = false;
				} else {
					uni.$emit('playBgm');
					this.audioStatus = true;
				}
			},
			/** 播放器实例跳转
			 * @param {Object} position
			 */
			audioSeek(position) {
				console.log('音乐跳转到', position);
				uni.$emit('audioSeek', position);
			},
			/** 进度条监听
			 * @param {Object} event
			 */
			onSliderChange(event) {
				console.log('拖动进度条')
				const value = event.detail.value;
				const newPosition = (value / 100) * this.musicInfo.duration;
				this.audioSeek(newPosition);
			},
			/** 前一首歌
			 * 
			 */
			preMusic() {
				uni.$emit('preMusic');
			},
			/** 下一首歌
			 * 
			 */
			nextMusic() {
				uni.$emit('nextMusic');
			},
			/** 喜欢
			 * 
			 */
			Like() {

			},
			/** 收藏
			 * 
			 */
			Collect() {
				console.log('收藏');
				if (!DetermineWeatherToLogIn()) {
					return 0;
				}
				this.show_window_collect = true;
				this.maskLayer = true;
				// 获取我的歌单
				console.log(this.userInfo._id);
				Album.GetAlbumList_e_albumList(this.userInfo._id).then(res => {
					console.log(res);
					this.albumList = res;
				});
			},
			/** 隐藏浮窗
			 * 
			 */
			hide() {
				console.log('hideWindow');
				this.maskLayer = false;
				this.show_window_collect = false;
			},
			/** 收藏到个人歌单
			 * 
			 */
			CollectToPersonalAlbum(index) {
				console.log("收藏到个人歌单");
				Album.PushBack_one_personalAlbum(this.albumList[index]._id, this.musicInfo._id).then(res => {
					console.log(res);
					if(res.success = "success"){
						this.hide();
					}
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.mask-layer {
		background-color: rgba(0, 0, 0, 0.4);
	}

	.container {
		position: relative;
	}

	.musicPlay-middle {
		/* #ifdef MP-WEIXIN */
		margin-top: 14%;
		/* #endif */
		/* #ifndef MP-WEIXIN */
		margin-top: 30%;
		/* #endif */

		.player {
			width: 560rpx;
			height: 560rpx;
			margin: auto;
			background-color: rgba(0, 0, 0, 0.04);
			border-radius: 30rpx;
			/* 避免margin融合 */
			overflow: hidden;
		}

		.player .disc {
			width: 80%;
			height: 80%;
			background-color: white;
			margin: auto;
			margin-top: 50rpx;
			border-radius: 50%;
		}

		.player .disc image {
			width: 100%;
			height: 100%;
			animation: spin 10s linear infinite;
			animation-play-state: paused;
		}

		.player .disc image.isActive {
			animation-play-state: running;
		}

		@keyframes spin {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		.name {
			max-width: 90%;
			text-align: center;
			font-size: 44rpx;
			font-weight: 900;
			margin: 50rpx auto;
		}

	}

	.musicPlay-down {
		position: absolute;
		bottom: 160rpx;
		width: 100%;
	}

	.musicPlay-down .top {
		display: flex;
		align-items: center;
		justify-content: space-between;

		view {}

		view:nth-child(1) {
			margin-left: 80rpx;
		}

		view:nth-child(4) {
			margin-right: 80rpx;
		}

		view text:nth-child(1) {
			font-size: 50rpx;
		}

		view view {
			font-size: 20rpx;
			text-align: center;
		}

	}

	.musicPlay-down .middle {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;


		slider {
			width: 74%;
			position: relative;
		}

		slider .now-time {
			position: absolute;
			left: 0;
			top: 40rpx;
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.5);
		}

		slider .total-time {
			position: absolute;
			right: 0;
			top: 40rpx;
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.5);
		}

		text:nth-child(1) {
			font-size: 40rpx;
			margin-left: 50rpx;
			color: rgba(0, 0, 0, 0.5);
		}

		text:nth-child(3) {
			font-size: 40rpx;
			margin-right: 50rpx;
			color: rgba(0, 0, 0, 0.5);
		}
	}

	.musicPlay-down .down {
		margin-top: 30rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		text:nth-child(1) {
			font-size: 60rpx;
			margin-left: 60rpx;
		}

		text:nth-child(5) {
			font-size: 60rpx;
			margin-right: 60rpx;
		}

		text:nth-child(2),
		text:nth-child(4) {
			font-size: 70rpx;
		}

		text:nth-child(3) {
			font-size: 100rpx;
		}
	}

	.window-collect {
		position: fixed;
		left: 0;
		bottom: 0;
		height: 50VH;
		width: 100vw;
		background-color: white;
		border-top-left-radius: $border-radius-window-down;
		border-top-right-radius: $border-radius-window-down;
		z-index: 100;

		.title {
			margin-top: 30rpx;
			margin-left: 40rpx;
		}

		.seg {
			margin-top: 20rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			height: 2rpx;
			background-color: rgba(0, 0, 0, 0.2);
		}

		.personal-album-list {
			height: 100%;
			padding-top: 20rpx;

			.item {
				overflow: visible;
				position: relative;
				padding-top: 10rpx;
				padding-bottom: 10rpx;

				.cover {
					margin-left: 20rpx;
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
					background-color: rgba(0, 0, 0, 0.05);
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.info {
					position: absolute;
					left: 170rpx;
					top: 50%;
					transform: translateY(-50%);

					.name {
						font-size: $font-size-m-m;
					}

					.quantity {
						margin-top: 6rpx;
						font-size: $font-size-s-l;
						color: rgba(0, 0, 0, 0.5);
					}
				}
			}
		}
	}
</style>